<template>
    <div class="create-setting">
        <div class="title">文生图 / 图生图</div>
        <div class="inner">
            <div class="keyword">
                <a-textarea
                    v-model:value="form.prompt"
                    placeholder="在此输入描述画面的关键词，注意不要输入敏感词内容（政治相关、色情、血腥、暴恐等）"
                    :auto-size="{ minRows: 4, maxRows: 6 }"
                    show-count
                    :maxlength="1800"
                    @input="onPrompt"
                />
            </div>
            <div class="action">
                <a-button type="primary" shape="round" @click="aiVisible = true">AI联想</a-button>
                <a-button type="link" @click="form.prompt = ''">清除</a-button>
            </div>
            <div class="box tips">
                <h5>提示词工作台</h5>
                <div class="tips-area">
                    <a-space wrap>
                        <div class="text">{{ form.promptEn }}</div>
                        <div class="tips-item" v-for="(item, index) in advanceList" :key="index">
                            {{ item.text }}
                        </div>
                        <div class="tips-item" v-for="(item, index) in commandList" :key="index">
                            {{ item.text }}
                        </div>
                    </a-space>
                </div>
                <div class="action">
                    <a-button type="primary" shape="round" @click="handleCopy">复制</a-button>

                    <a-popconfirm title="这将重置所有参数，确认清空提示词工作台?" ok-text="确定" cancel-text="取消" @confirm="handleClear">
                        <a-button type="link">清除</a-button>
                    </a-popconfirm>
                </div>
            </div>
            <Module v-model="commandList"></Module>
            <BgImg @change="onBgImgChange"></BgImg>
            <StyleImg @change="onStyleChange"></StyleImg>
            <Size @change="onSizeChange"></Size>
            <ExcludeWord @change="onExcludeWordChange"></ExcludeWord>
            <Advanced @change="onAdvancedChange"></Advanced>
            <Ai v-model="aiVisible" @use="onAiUse"></Ai>
        </div>
        <footer>
            <div class="create-model">
                <a-radio-group v-model:value="form.drawingType">
                    <a-radio value="Drawing_Fast">快图模式</a-radio>
                    <a-radio value="Drawing_Relaxed">常规模式</a-radio>
                </a-radio-group>
            </div>
            <a-button type="primary" block shape="round" size="large" :loading="loading" @click="handleSubmit">提交任务</a-button>
        </footer>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { upload, zhToEn, createImage, CreateImage } from "@/api/draw";

import Ai from "./components/Ai.vue";
import Module from "./components/Module.vue";
import BgImg from "./components/BgImg.vue";
import StyleImg from "./components/StyleImg.vue";
import Size from "./components/Size.vue";
import ExcludeWord from "./components/ExcludeWord.vue";
import Advanced from "./components/Advanced.vue";
import { message } from "ant-design-vue";
import useClipboard from "vue-clipboard3";
import { command, ICommand } from "./data";

const { toClipboard } = useClipboard();

const form = reactive<CreateImage>({
    drawingType: "Drawing_Fast",
    path: "imagine",
    promptText: "",
    prompt: "",
    promptEn: "",
    command: "",
    base64: "",
    base64Array: [],
    dimensions: "",
    sourceFile: "",
    targetFile: "",
    sourceImgUrl: "",
    targetImgUrl: "",
    applicationCode: "",
    srefImages: [],
    chatChannel: "Web_Chat",
});
const commandList = ref<ICommand[]>(command);
const advanceList = ref<ICommand[]>([]);
const aiVisible = ref(false);
const styleImgs = ref<File[]>([]);
const loading = ref(false);

const onAiUse = (val: string) => {
    form.prompt = val;
};
const handleCopy = async () => {
    try {
        // 复制
        await toClipboard(form.promptEn);
        message.success("复制成功");
        // 复制成功
    } catch (e) {
        console.log(e);
        // 复制失败
    }
};
const handleClear = () => {
    form.prompt = "";
};

const onPrompt = async () => {
    const reg = /[\u4e00-\u9fa5]/;
    if (reg.test(form.prompt)) {
        const { data } = await zhToEn({ text: form.prompt });
        form.promptEn = data;
        return;
    }
    form.promptEn = form.prompt;
    form.promptText = form.prompt;
};
const onSizeChange = (val: string) => {
    const index = commandList.value.findIndex((item) => item.type == "size");
    commandList.value[index].text = val;
};
const onAdvancedChange = (val: ICommand[]) => {
    advanceList.value = val;
};
const onExcludeWordChange = (val: ICommand[]) => {
    const index = commandList.value.findIndex((item) => item.type == "no-word");
    if (index == -1) {
        commandList.value = [...val, ...commandList.value];
    } else {
        if (val.length > 0) {
            commandList.value[index] = val[0];
        } else {
            commandList.value.splice(index, 1);
        }
    }
};
const onBgImgChange = (val: never[]) => {
    form.base64Array = val;
};
const onStyleChange = (files: File[]) => {
    styleImgs.value = files;
};

const handleSubmit = async () => {
    try {
        if (form.prompt == "") return message.error("为了获得最佳体验，提示词不可为空!");
        loading.value = true;
        if (styleImgs.value.length > 0) {
            const formData = new FormData();
            styleImgs.value.forEach((item) => {
                formData.append("file", item);
            });
            const { data } = await upload(formData);
            form.srefImages = data;
        }
        const command: string[] = [...advanceList.value, ...commandList.value].map((item) => item.text);
        form.command = command.join(" ");
        const {
            data: { code, description },
        }: any = await createImage(form);
        console.log(code);
        if (code !== 200) {
            message.error(description);
        }
    } catch (error) {
    } finally {
        loading.value = false;
    }
};
</script>
<style lang="less">
.create-setting {
    background-color: #303841;
    width: 380px;
    height: 100vh;
    overflow: hidden;
    .inner {
        height: calc(100vh - 160px);
        overflow: auto;
        padding: 0 15px;
    }
    .title {
        font-size: 20px;
        padding-left: 16px;
        color: #fff;
        font-weight: 700;
        border-bottom: 1px solid #262626;
        line-height: 64px;
        position: relative;
        &::after {
            background: #262626;
            height: 100%;
            width: 1px;
            right: 2px;
            content: "";
            position: absolute;
            top: 0;
        }
    }
    .keyword {
        padding-top: 10px;
    }
    .action {
        padding: 5px 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .input {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
    }
    .box {
        margin-top: 10px;
        background: #454c54bc;
        border-radius: 6px;
        &.tips,
        &.modules {
            padding: 10px 10px 20px;
        }
        h5 {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.82);
            font-weight: bold;
            margin-bottom: 20px;
        }
    }
    .tips-area {
        background: #454c54;
        border: 1px solid #acacaccc;
        border-radius: 6px;
        min-height: 80px;
        margin-bottom: 10px;
        padding: 8px;
        padding-bottom: 16px;
        .text {
            color: #fff;
            font-size: 14px;
        }
        .tips-item {
            border: 1px solid #e5e7eb;
            color: #fff;
            border-radius: 20px;
            padding: 0 10px;
        }
    }
    .modules-list {
        ul {
            margin: 0;
            padding: 0;
            color: #fff;
        }
        li {
            padding: 4px 10px;
            border-radius: 6px;
            list-style: none;
            border: 1px solid #fff;
            color: #fff;
            cursor: pointer;
            &.active {
                color: #1677ff;
                border-color: #1677ff;
            }
        }
    }
    .pic {
        .tips {
            color: #999;
            font-size: 12px;
            margin-bottom: 10px;
            div {
                color: rgb(240, 138, 0);
            }
        }
    }
    footer {
        padding: 15px;
        box-sizing: border-box;
        .create-model {
            margin-bottom: 10px;
        }
    }
}
</style>
